<template>
	<view class="commodity_taking_order_box">
		<view style="commodity_manage_box">
			<u-empty
				mode="data"
				icon="http://cdn.uviewui.com/uview/empty/data.png"
				text="该店铺暂无商品"
				v-show="typeEmptyShow"
			>
			</u-empty>
			<view class="left_commodity_type_box">
				<view class="type_item" v-for="item,index in commodityTypeList" :ref="`type_item${item.id}`" @click="clickTypeItem(item)">
					<text>{{item.typeName}}</text>
				</view>
			</view>
			<!-- 商品信息列表 -->
			<view class="commodity_list">
				<u-empty
					mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
					text="暂无商品"
					v-show="commodityListEmptyShow"
				>
				</u-empty>
				<view class="commodity_item" v-for="(item,index) in commodityList">
					<image @click="goCommodityDetail(item.id)" class="commodity_item_image" :src='`http://localhost:15000/eat-service/fileManager/getImageById?id=` + item.imageId' mode=""></image>
					<view class="commodity_item_textbox">
						<p @click="goCommodityDetail(item.id)" class="commodity_item_name">{{item.commodityName}}</p>
						<p class="commodity_item_remark">{{item.remark}}</p>
						<p class="commodity_item_remark">包装费{{item.packPrice}}元</p>
						<p class="commodity_item_amount">销售{{item.amount}}</p>
						<text class="commodity_item_price">
							￥{{item.price}}
						</text>
						<text class="commodity_item_priced">￥{{item.priced}}</text>
						<view class="commodity_item_btns">
							<u-button v-show="item.sum > 0" @click="addCommodity(item,index)" class="commodity_item_updateBtn" type="primary" shape="circle">
								<u-icon color="white" name="plus"></u-icon>
							</u-button>
							<u-button v-show="item.sum <= 0" class="commodity_item_updateBtn" type="error" text="售空">
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部购物车 -->
		<view class="shop_car">
			<image @click="shopCarContentShow = true" class="shop_car_image" :src="shopCarImageSrc" mode=""></image>
			<view class="shop_car_text_box">
				<p class="shop_car_sum_price">￥{{sumCommodityPrice}}</p>
				<text class="shop_car_sum_distribution_price">另需配送费需{{distributionPrice}}元</text>
			</view>
			<u-button 
				class="shop_car_settlement" 
				type="primary" shape="circle" 
				:disabled="true" 
				v-show="settlementStatus"
				>
				￥{{shopForm.minPrice}}起送
			</u-button>
			<u-button 
				@click="goOrderSubmit" 
				class="shop_car_settlement" 
				type="primary" shape="circle" 
				v-show="!settlementStatus"
				>
				去结算
			</u-button>
		</view>
		<!-- 购物车内容 -->
		<u-popup :show="shopCarContentShow" @close="closeShopCarContentShow">
			<view class="shop_car_popup_slot">
				<view class="shop_car_header">
					<text>已选商品</text>
					<text class="shop_car_header_packtext">包装费{{sumPackPrice}}元</text>
					<p @click="emptyShopCar" class="shop_car_header_empty">
						清空
					</p>
				</view>
				<view class="shop_car_main">
					<view class="shop_car_main_commodity_item" v-for="(item,index) in commodityListForm">
						<image @click="goCommodityDetail(item.id)" class="shop_car_main_commodity_item_image" :src='`http://localhost:15000/eat-service/fileManager/getImageById?id=` + item.imageId' mode=""></image>
						<view class="shop_car_main_commodity_item_textbox">
							<p @click="goCommodityDetail(item.id)" class="shop_car_main_commodity_item_name">{{item.commodityName}}</p>
							<view class="shop_car_main_commodity_item_pricebox">
								<text class="shop_car_main_commodity_item_price">
									￥{{item.price}}
								</text>
								<text class="shop_car_main_commodity_item_priced">￥{{item.priced}}</text>
							</view>
							<view class="shop_car_main_commodity_item_btns">
								<u-button @click="deleteCommodity(item,index)" class="commodity_item_updateBtn" type="error" shape="circle">
									<u-icon color="white" name="close"></u-icon>
								</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 消息提示框 -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 存放 所有 商品信息列表
				commodityListAll: [],
				// 存放商品分类信息列表
				commodityTypeList: [],
				// 商品分类信息列表 空状态
				commodityTypeListEmptyShow: false,
				// 商品类别id
				commodityTypeId: '',
				// 存放 商品信息列表
				commodityList: [],
				// 商品信息列表 为空 展示
				commodityListEmptyShow: false,
				// 商品列表 空状态
				typeEmptyShow: false,
				// 总价格
				sumPrice: 0,
				// 商品总价格（不算包装费）
				sumCommodityPrice: 0,
				// 总包装费
				sumPackPrice: 0,
				// 总配送价格
				distributionPrice: 9,
				// 订单 总重量
				sumWeight: 0,
				// 选购商品集合
				commodityListForm: [],
				// 结算按钮状态
				settlementStatus: true,
				// 结算按钮内容
				settlementText: "",
				// 购物车图片路径
				shopCarImageSrc: '../../static/logo.png',
				// 购物车内容弹框显示状态
				shopCarContentShow: false,
				// 店铺信息集合
				shopForm:{},
				// 总出餐时间
				sumMealTime: 0,
			}
		},
		props: {
			shopId: {
				value: ''
			}
		},
		mounted () {
			// 查询店铺信息根据id
			this.getAllShopById()
		},
		watch: {
			commodityTypeId (newData) {
				this.$nextTick(() => {
					this.commodityTypeList.forEach(ele => {
						this.$refs['type_item' + ele.id][0].$el.style.backgroundColor = '#F2F2F2'
					})
					this.$refs['type_item' + newData][0].$el.style.backgroundColor = 'white'
					// 页面渲染完成过后 根据店铺id 以及 分类id获取商品信息列表
					this.getCommodityListByShopId()
				})
			},
			// 监听商品总价格
			sumCommodityPrice (newData) {
				if (newData >= this.shopForm.minPrice) {
					this.settlementStatus = false
				} else {
					this.settlementStatus = true
				}
				// 计算配送费
				if(newData >= 30) {
					this.distributionPrice = 5
				} else if(newData >= 20) {
					this.distributionPrice = 7
				} else {
					this.distributionPrice = 9
				}
			},
			// 监听用户是否选购商品
			commodityListForm (newData) {
				if (newData.length > 0) {
					this.shopCarImageSrc = '../../static/icon/725df84c4220812289b3f757a15385e.jpg'
				} else {
					this.shopCarImageSrc = '../../static/logo.png'
				}
			},
			// 监听订单总重量变化
			sumWeight (newData) {
				
			}
		},
		onUnload(){
		},
		created () {
			// 初始化获取商品分类信息列表
			this.getCommodityTypeList()
		},
		methods: {
			// 去到提交订单页面
			goOrderSubmit () {
				const ids = this.commodityListForm.map(v=>v.id)
				const commodity = {
					// 选购的商品信息列别
					commodityList: this.commodityListForm,
					// 店铺id
					shopId: this.shopId,
					// 总价格
					sumPrice: this.sumPrice,
					// 总包装费
					sumPackPrice: this.sumPackPrice,
					// 商品总价格
					sumCommodityPrice: this.sumCommodityPrice,
					// 重量
					sumWeight: this.sumWeight,
					// 配送费
					distributionPrice: this.distributionPrice,
					// 总出餐时间
					sumMealTime: this.sumMealTime
				}
				uni.navigateTo({
					url: '/pages/order/order-submit?commodity=' + encodeURIComponent(JSON.stringify(commodity))
				})
			},
			// 清空购物车
			emptyShopCar () {
				const ids = this.commodityListForm.map(v=>v.id)
				this.commodityListAll.forEach((item,index) => {
					ids.forEach((id,idsIndex) => {
						if (item.id === id) {
							this.commodityListAll[index].sum += 1
						}
					})
				})
				this.commodityListForm = []
				this.sumPackPrice = 0
				this.sumCommodityPrice = 0
				this.sumPrice = 0
				this.sumWeight = 0
				this.sumMealTime = 0
			},
			// 删除 选购列表当中的 商品信息
			deleteCommodity (commodity,index) {
				this.commodityListForm.splice(index, 1)
				this.commodityListAll.forEach((item,index) => {
					if (item.id === commodity.id) {
						this.commodityListAll[index].sum += 1
					}
				})
				// 总包装费
				this.sumPackPrice -= commodity.packPrice
				// 算出商品总价格（商品加包装费的总价格，不包括配送费）
				this.sumCommodityPrice -= commodity.price + commodity.packPrice
				// 转换类型 保存2位小数点
				this.sumCommodityPrice = parseFloat(this.sumCommodityPrice.toFixed(2))
				// 总价格 商品总价格 + 配送费
				this.sumPrice = this.sumCommodityPrice + this.distributionPrice
				// 总重量
				this.sumWeight -= commodity.weight
				// 总出餐时间
				this.sumMealTime -= commodity.mealTime
			},
			// 加购商品
			addCommodity (commodity,index) {
				this.commodityListForm.push(commodity)
				this.commodityListAll.forEach((item,index) => {
					if (item.id === commodity.id) {
						this.commodityListAll[index].sum -= 1
					}
				})
				// 总包装费
				this.sumPackPrice += commodity.packPrice
				// 算出商品总价格（商品加包装费的总价格，不包括配送费）
				this.sumCommodityPrice += commodity.price + commodity.packPrice
				// 转换类型 保存2位小数点
				this.sumCommodityPrice = parseFloat(this.sumCommodityPrice.toFixed(2))
				// 总价格 商品总价格 + 配送费
				this.sumPrice = this.sumCommodityPrice + this.distributionPrice
				// 总重量
				this.sumWeight += commodity.weight
				// 总出餐时间
				this.sumMealTime += commodity.mealTime
			},
			//查询店铺信息根据id
			getAllShopById() {
				this.$myRequest({
					url: '/eat-service/shop/shopById',
					method: 'get',
					data: {
						shopId: this.shopId,
					}
				}).then(res => {
					this.shopForm = res.data.obj
				})
			},
			// 关闭 购物车弹框 方法
			closeShopCarContentShow() {
				this.shopCarContentShow = false
			},
			// 根据店铺id获取商品信息列表
			getCommodityListByShopId () {
				this.$myRequest({
					url: '/eat-service/commodity/getCommodityListAllByShopId',
					data: {
						shopId: this.shopId,
					},
				}).then(res => {
					this.commodityListAll = res.data.obj
					this.commodityList = []
					this.commodityListAll.forEach(item => {
						if (this.commodityTypeId === item.typeId) {
							this.commodityList.push(item)
						}
					})
					if (this.commodityList.length === 0) {
						this.commodityListEmptyShow = true
					} else {
						this.commodityListEmptyShow = false
					}
				})
			},
			// 点击 商品分类触发方法（修改样式，进行模糊查）
			clickTypeItem (item) {
				this.commodityTypeList.forEach(ele => {
					this.$refs['type_item' + ele.id][0].$el.style.backgroundColor = '#F2F2F2'
				})
				var re = 'type_item' + item.id
				this.$refs[re][0].$el.style.backgroundColor = 'white'
				this.commodityTypeId = item.id
			},
			// 根据店铺id获取当前 商品分类列表信息
			getCommodityTypeList () {
				this.$myRequest({
					url: '/eat-service/commodityType/getCommodityTypeList',
					data: {
						shopId: this.shopId
					}
				}).then(res => {
					if (res.data.flag) {
						uni.stopPullDownRefresh()
					}
					this.commodityTypeList = res.data.obj
					if (this.commodityTypeList.length === 0) {
						this.typeEmptyShow = true
					} else {
						this.commodityTypeId = this.commodityTypeList[0].id
					}
				})
			},
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					message: message,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
		}
	}
</script>

<style scoped>
.commodity_taking_order_box{
	width: 100%;
}
.commodity_manage_box{
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow: scroll;
}
.left_commodity_type_box{
	width: 30%;
	height: 490px;
	overflow: hidden;
	overflow: scroll;
	float:left;
}
.type_item{
	width: 100%;
	height: 60px;
	line-height: 60px;
	background-color: #F2F2F2;
	text-align: center;
}
.commodity_list{
	overflow: hidden;
	overflow: scroll;
	width: 68%;
	height: 480px;
	float:left;
	margin-left: 2%;
}
.commodity_item{
	width: 100%;
	height: 150px;
	margin-top: 10px;
	position: relative;
}
.commodity_item_image{
	width: 100px;
	height: 100px;
	float:left;
}
.commodity_item_name{
	font-weight: bold;
}
.commodity_item_price{
	color: #FC503D;
	font-weight: bold;
}
.commodity_item_textbox{
	width: 62%;
	float:left;
	margin-left: 2%;
}
.commodity_item_remark{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	color: #A2A0A1;
}
.commodity_item_amount{
	color: #A2A0A1;
}
.commodity_item_priced{
	font-size: 12px;
	text-decoration:line-through
}
.commodity_item_btns{
	position: absolute;
	bottom: 0;
	right: 10px;
	float:right;
}
.commodity_item_updateBtn{
	width: 30px;
	height: 30px;
	float:right;
}
/* 底部购物车 */
.shop_car{
	width: 100%;
	height: 60px;
	position: absolute;
	bottom: 0;
	left: 0;
	box-shadow: 0px -1px 10px gainsboro;
	background-color: white;
}
.shop_car_text_box{
	margin-top: 8px;
	margin-left: 8px;
	float:left;
}
.shop_car_sum_price{
	font-weight: bold;
}
.shop_car_sum_distribution_price{
	color: #A2A0A1;
}
.shop_car_settlement{
	width: 100px;
	position: absolute;
	top: 10px;
	right: 10px;
}
.shop_car_image{
	width: 45px;
	height: 45px;
	margin-top: 8px;
	margin-left: 8px;
	float:left;
}
/* 购物车弹框 */
.shop_car_popup_slot {
	width: 95%;
	height: 360px;
	overflow: hidden;
	overflow: scroll;
	@include flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	position: relative;
}
/* 购物车弹框头部 */
.shop_car_header{
	width: 95%;
	height: 30px;
	background-color: white;
	z-index: 1000;
	padding: 10px;
	position: relative;
	position: fixed;
	bottom: 340px;
	left: 0;
}
.shop_car_header_packtext{
	margin-left: 20px;
}
.shop_car_header_empty{
	float:right;
}
.shop_car_main{
	margin-top: 30px;
}
/* 购物车商品展示列表 */

.shop_car_main_commodity_item{
	width: 100%;
	height: 90px;
	margin-top: 10px;
}
.shop_car_main_commodity_item_image{
	width: 80px;
	height: 80px;
	float:left;
}
.shop_car_main_commodity_item_textbox{
	position: relative;
	width: 77%;
	height: 80px;
	float:left;
	margin-left: 2%;
}
.shop_car_main_commodity_item_name{
	font-weight: bold;
}
.shop_car_main_commodity_item_pricebox{
	position: absolute;
	bottom: 10px;
	left: 0;
}
.shop_car_main_commodity_item_price{
	color: #FC503D;
	font-weight: bold;
}
.shop_car_main_commodity_item_priced{
	font-size: 12px;
	text-decoration:line-through;
}
.shop_car_main_commodity_item_btns{
	position: absolute;
	bottom: 0;
	right: 10px;
	float:right;
}
</style>
